<template>
  <div class="user-mgt">
    <el-scrollbar style="height: calc(100% - 100px)">
      <ul>
        <li v-for="(item, index) in userList" :key="index">
          <span>{{ item.userName }}</span>
          <div
            class="item"
            :class="{ active: item.one }"
            @click="onActive('one', index)"
          >
            <svg-icon
              name="video"
              style="width: 22px; height: 22px; fill: rgba(166, 166, 166, 1)"
            />
          </div>
          <div
            class="item"
            :class="{ active: item.two }"
            @click="onActive('two')"
          >
            <svg-icon name="room" style="width: 22px; height: 22px" />
          </div>
          <div class="item" :class="{ active: item.three }">
            <svg-icon name="Photo camera" style="width: 22px; height: 22px" />
          </div>
          <div class="item">
            <svg-icon name="Video camera" style="width: 22px; height: 22px" />
          </div>
          <div class="root">
            <svg-icon
              name="user-white"
              style="width: 44px; height: 44px; margin-right: 12px"
            />
            <svg-icon name="user-red" style="width: 44px; height: 44px" />
          </div>
        </li>
      </ul>
    </el-scrollbar>
    <div class="btn">
      <el-button
        type="primary"
        @click="submitForm"
        style="width: 140px; height: 50px; font-size: 18px"
      >
        保存
      </el-button>
    </div>
  </div>
</template>

<script setup>
const userList = ref([
  {
    userName: "张三",
    one: true,
    two: false,
    three: false,
    four: false,
    five: false,
    six: false,
  },
  {
    userName: "张三三",
    one: true,
    two: true,
    three: false,
    four: true,
    five: false,
    six: false,
  },
  {
    userName: "张三思",
    one: false,
    two: false,
    three: false,
    four: false,
    five: false,
    six: false,
  },
  {
    userName: "张三思",
    one: false,
    two: false,
    three: false,
    four: false,
    five: false,
    six: false,
  },
  {
    userName: "张三思",
    one: false,
    two: false,
    three: false,
    four: false,
    five: false,
    six: false,
  },
  {
    userName: "张三思",
    one: false,
    two: false,
    three: false,
    four: false,
    five: false,
    six: false,
  },
  {
    userName: "张三思",
    one: false,
    two: false,
    three: false,
    four: false,
    five: false,
    six: false,
  },
  {
    userName: "张三思",
    one: false,
    two: false,
    three: false,
    four: false,
    five: false,
    six: false,
  },
  {
    userName: "张三思",
    one: false,
    two: false,
    three: false,
    four: false,
    five: false,
    six: false,
  },
]);
const onActive = (type, index) => {};
</script>
<style scoped lang="scss">
.user-mgt {
  height: 100%;
  padding: 0 62px;
  ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 700;
    li {
      padding: 33px 0;
      border-bottom: 1px solid rgba(158, 158, 158, 0.24);
      width: 615px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      span {
        margin-right: 60px;
        min-width: 70px;
      }
      .item {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        width: 67px;
        height: 67px;
        background: linear-gradient(319.35deg, #262424 15.44%, #000000 84.72%);
        cursor: pointer;
      }
      .root {
        margin-left: 70px;
        .svg-icon {
          cursor: pointer;
        }
      }
      .active {
        background: linear-gradient(
          319.35deg,
          rgba(61, 167, 141, 0.1) 15.44%,
          #39d0ac 84.72%
        );
        .svg-icon {
          fill: #fff;
        }
      }
    }
  }
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 22px;
  }
}
</style>
